<template>
  <div class="knowledegItem" @click="toDetail(item.id)">
    <div class="header">
      <h3>{{ item.title }}</h3>
      <span></span>
      <p>{{ item.publishAt | formatDate }}</p>
    </div>
    <div class="main">
      <div class="content">
        <p class="itemcontent">{{ item.summary }}</p>
        <div>
          <!-- 观看 -->
          <span>
            <span role="img" aria-label="eye" class="anticon anticon-eye">
              <svg
                viewBox="64 64 896 896"
                focusable="false"
                data-icon="eye"
                width="1em"
                height="1em"
                fill="currentColor"
                aria-hidden="true"
              >
                <path
                  d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
                ></path></svg
            ></span>
            <span class="views">{{ item.views }}</span>
          </span>
          <span id="split">·</span>
          <!-- 分享 -->
          <span @click.stop="share()"
            ><span
              ><span
                role="img"
                aria-label="share-alt"
                class="anticon anticon-share-alt"
                ><svg
                  viewBox="64 64 896 896"
                  focusable="false"
                  data-icon="share-alt"
                  width="1em"
                  height="1em"
                  fill="currentColor"
                  aria-hidden="true"
                >
                  <path
                    d="M752 664c-28.5 0-54.8 10-75.4 26.7L469.4 540.8a160.68 160.68 0 000-57.6l207.2-149.9C697.2 350 723.5 360 752 360c66.2 0 120-53.8 120-120s-53.8-120-120-120-120 53.8-120 120c0 11.6 1.6 22.7 4.7 33.3L439.9 415.8C410.7 377.1 364.3 352 312 352c-88.4 0-160 71.6-160 160s71.6 160 160 160c52.3 0 98.7-25.1 127.9-63.8l196.8 142.5c-3.1 10.6-4.7 21.8-4.7 33.3 0 66.2 53.8 120 120 120s120-53.8 120-120-53.8-120-120-120zm0-476c28.7 0 52 23.3 52 52s-23.3 52-52 52-52-23.3-52-52 23.3-52 52-52zM312 600c-48.5 0-88-39.5-88-88s39.5-88 88-88 88 39.5 88 88-39.5 88-88 88zm440 236c-28.7 0-52-23.3-52-52s23.3-52 52-52 52 23.3 52 52-23.3 52-52 52z"
                  ></path></svg></span
              ><span class="views">分享</span></span
            ></span
          >
        </div>
      </div>

      <div class="pic">
        <img :src="item.cover" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
import Share from "../share/index";
export default {
  props: {
    item: {
      type: Object,
      required: true,
    },
  },
  methods: {
    toDetail(id) {
      this.$router.push(`/konwledge/${id}`);
    },
    // 生成分享的海报
    share() {
      Share(this.item);
    },
  },
};
</script>

<style scoped lang='scss'>
.knowledegItem:hover {
  h3 {
    color: red;
  }
}
.knowledegItem {
  padding: 1rem;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  position: relative;
}
.header {
  display: flex;
  height: 40px;
  background-color: #fff !important;
  align-items: center;
  h3 {
    color: var(--main-text-color);
    overflow: hidden;
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  span {
    position: relative;
    top: -0.06em;
    display: inline-block;
    height: 0.9em;
    margin: 0 8px;
    vertical-align: middle;
    border-top: 0;
    border-left: 1px solid rgba(0, 0, 0, 0.06);
  }
  p {
    font-size: 14px;
    color: #8590a6;
  }
}
.main {
  display: flex;
  flex-wrap: nowrap;
  padding-top: 12px;
  .content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    div {
      width: 100%;
      color: #8590a6;
      font-size: 14px;
      line-height: 20px;
      margin-top: 0.8rem;
    }
    span .views {
      margin-left: 6px;
      color: var(--second-text-color);
    }
    // span {
    //   color: #aaa;
    // }
    #split{
      margin: 0 8px;
    }
    .itemcontent {
      font-size: 14px;
    }
  }
}
.pic {
  flex: 0 0 auto;
  position: relative;
  width: 120px;
  max-height: 100px;
  min-height: 80px;
  border-radius: var(--border-radius);
  margin-left: 1.5rem;
  overflow: hidden;
  img {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 100%;
    width: 100%;
    transform: translate3d(-50%, -50%, 0);
    object-fit: cover;
  }
}
</style>
